<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box">
        <div id="mydiv" class="myClass">123</div>
        <div id="mydiv" class="myClass">123</div>
    </div>
   
    <script>
        // DOM : Document Object Model; 和文档相关东西
        // DOM 顶级对象是 document
        // console.log( window.document);
        // 一、获取dom元素
        // 1.通过id获取元素 (非主流，野路子);
        // document.getElementsByTagName
        // console.log(mydiv)
        // mydiv.value 
        // document.getElementById("mdiv").vlaue
        // 2.通过 document.getElementById 获取元素(element)
        // 唯一标识符id
        // var ele = document.getElementById("mydiv");
        // console.log(ele);
        // 2. 通过类名获取 得到一个伪数组
        // var ele = document.getElementsByClassName("myClass")[0];
        // console.log(ele);
        // 3.通过标签名称
        // var ele = document.getElementsByTagName("div")[0];
        // console.log(ele);
        // 4.querySelector :直接通过css方式
        //  只能获取第一个元素
    //    var ele =  document.querySelector(".box .myClass");
    //    console.log(ele);
        // querySelectorAll :可以获取符合条件的多个元素;
        // var eles = document.querySelectorAll(".box .myClass");
        // console.log(eles);



    </script>
</body>
</html>